<template>
	<view>
		<!-- <app-my-order v-if="userCenter.is_order_bar_status == 1" marginMo="24rpx auto" :margin="true" :round="true" :theme="getTheme"
			:order_bar="userCenter.order_bar"></app-my-order> -->
		<app-my-order marginMo="24rpx auto" :margin="true" :round="true" :theme="getTheme"></app-my-order>
		<view class="fenxiao" @click="jump('/pages/pt/apelled/apelled')">
			<view class="fx-zi">
				我的拼团
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/entity/followlist')">
			<view class="fx-zi">
				实体店收藏
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<!-- 10.13 -->
		<!-- <view class="fenxiao" @click="jump('/plugins/pond/index/index')">
			<view class="fx-zi">
				抽奖
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view> -->
		<!-- 11.03 问卷调查 -->
		<view class="fenxiao" @click="jump('/pages/user-center/answer/answer')">
			<view class="fx-zi">
				问卷调查
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<app-account-balance v-if="userCenter.account_bar.status == 1" topMargin="-46rpx auto 0" :margin="true"
			:round="true" :input-user-center="userCenter"></app-account-balance>

		<view class="app-my-service" v-if="userCenter.is_menu_status == 1">
			<view class="title" v-if="userCenter.menu_title">{{userCenter.menu_title}}</view>
			<view class="list" :class="[listStyle]">
				<view class="item" v-for="(item, index) in userCenter.menus" :key="index">
					<app-jump-button form :url="item.link_url" :open_type="item.open_type" :item="item"
						:arrangement="`${userCenter.menu_style === '1' ? 'row' : userCenter.menu_style === '2' ? 'column' : ''}`">
						<view style="width: 100%" class="item-container"
							:class="[userCenter.menu_style=='1'?'dir-left-nowrap cross-center':'',userCenter.menu_style=='2'?'dir-top-nowrap cross-center':'',]">
							<view class="box-grow-0">
								<image :src="item.icon_url" class="icon"></image>
							</view>
							<view class="box-grow-1" style="max-width: 100%">
								<view class="name">{{item.name}}</view>
							</view>
							<view class="box-grow-0" v-if="userCenter.menu_style=='1'">
								<image src="/static/image/icon/arrow-right.png" class="arrow"></image>
							</view>
						</view>
					</app-jump-button>
				</view>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/share/index/index')">
			<view class="fx-zi">
				可提现佣金
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<view class="fenxiao" @click="jump('/pages/sixty/user-center/user-center')">
			<view class="fx-zi">
				嗨我来了个人主页
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<!-- <view class="fenxiao" @click="jump('/pages/user-center/contactus/contactus')">
			<view class="fx-zi">
				联系我们
			</view>
			<view class="fx-image">
				<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
			</view>
		</view> -->
		<view class="integral">
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true"
				@click="tointegral" :disable-touch="true">
				<swiper-item v-for="(item,index) in imgintegral" :key="index">
					<view class="int-item">
						<image :src="item.icon_url" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import AppUserCenterTop from '../../../components/page-component/app-user-center-top/app-user-center-top.vue';
	import AppMyOrder from '../../../components/page-component/app-my-order/app-my-order.vue';
	import AppAccountBalance from '../../../components/page-component/app-account-balance/app-account-balance.vue';
	export default {
		data() {
			return {
				/* order_bar: [{
						icon_url: "https://ceshi.senmainet.com/web/uploads/mall1/20210324/6c6f1e89e64a97592d8fcd60aa93bd71.png",
						link_url: "/pages/order/index/index?status=1",
						name: "待付定金",
						num: 0,
						open_type: "navigate",
						text: ""
					},
					{
						icon_url: "https://ceshi.senmainet.com/web/statics/img/mall/user-center/icon-order-1.png",
						link_url: "/pages/order/index/index?status=2",
						name: "待去实体店",
						num: 0,
						open_type: "navigate",
						text: ""
					},
					{
						icon_url: "https://ceshi.senmainet.com/web/uploads/mall1/20210324/c3ef3126c398623397a2fcb2236660be.png",
						link_url: "/pages/order/index/index?status=3",
						name: "待付尾款",
						num: 0,
						open_type: "navigate",
						text: ""
					},
					{
						icon_url: "https://ceshi.senmainet.com/web/statics/img/mall/user-center/icon-order-3.png",
						link_url: "/pages/order/index/index?status=4",
						name: "已完成",
						num: 0,
						open_type: "navigate",
						text: ""
					},
					{
						icon_url: "https://ceshi.senmainet.com/web/uploads/mall1/20210324/678ecd4a89103d8b0842fa482c4c2f37.png",
						link_url: "/pages/order/refund/index",
						name: "售后",
						num: 0,
						open_type: "navigate",
						text: ""
					}
				], */
				imgprefix: this.$siteInfo.imgroot,
				imgintegral: []
			}
		},
		computed: {
			...mapState({
				copyright: state => state.mallConfig.copyright,
				userCenter: state => state.userCenter.data,
				userInfo: state => state.user.info,
				is_icon_super_vip: function(state) {
					return state.mallConfig.mall.setting.is_icon_super_vip;
				},
				foot_bar: function(state) {
					return state.userCenter.data.foot_bar;
				}
			}),

			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			}),
			listStyle() {
				if (this.userCenter.menu_style == 1) return 'row';
				if (this.userCenter.menu_style == 2) return 'grid dir-left-wrap';
				return '';
			}
		},
		// 获取个人信息的常用工具 11.01
		mounted() {
			this.$nextTick().then(() => {
				this.$store.dispatch('userCenter/data');
			});
		},
		onLoad(options) {
			// this.imgprefix = this.$siteInfo.imgroot
			this.allReq()
			/* console.log(options, 'options gren');
			console.log(this.userCenter, 'grtnr'); */
			/* uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			}) */
		},
		components: {
			AppUserCenterTop,
			AppAccountBalance,
			AppMyOrder,
		},
		methods: {
			jump(item) {
				uni.navigateTo({
					url: item
				})
			},
			tointegral() {
				uni.navigateTo({
					url: '/plugins/integral_mall/index/index'
				})
			},
			allReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 744,
						status: 1
					}
				}).then((res) => {
					this.imgintegral = res.data.list
				}).catch(() => {

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.app-my-service {
		width: #{702rpx};
		border-radius: #{16rpx};
		margin: #{24rpx} auto;
		box-shadow: 0 0 #{8rpx} rgba(0, 0, 0, .05);
		background: #fff;

		.title {
			padding: #{32rpx} #{32rpx} #{16rpx};
			border-bottom: 2rpx solid #f4f3f3;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.list {
			.item {
				.icon {
					width: 96rpx;
					height: 96rpx;
					display: block;
				}

				.arrow {
					width: #{12rpx};
					height: #{22rpx};
				}
			}
		}

		.list.row {
			.item-container {
				padding: #{20rpx} #{32rpx};
			}

			.icon {
				margin-right: #{16rpx};
			}
		}

		.list.grid {
			.item {
				width: 25%;

				.icon {
					margin-bottom: #{28rpx};
				}

				.name {
					padding: 0 #{12rpx};
					font-size: $uni-font-size-weak-one;
					color: $uni-general-color-one;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item-container {
				padding: #{24rpx} 0;
			}
		}
	}

	.fenxiao {
		width: 702rpx;
		margin: 24rpx auto;
		background: #FFFFFF;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;

		.fx-image {
			width: 12rpx;
			height: 22rpx;

			.arrow {
				width: 12rpx;
				height: 22rpx;
			}
		}
	}

	.integral {
		width: 702rpx;
		height: 702rpx;
		margin: 0 auto;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.int-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
